/* * @Author: Yejing * @Date: 2023-06-14 18:12:10 * @LastEditors: Yejing * @LastEditTime: 2023-07-22 15:21:44 *
@Description: 任务详情、任务结算、带货开播申请 */
<template>
	<view class="task-details-page">
		<c-layout style="height: 210rpx;">
			<c-navigation-bar :title="title" slot="head"></c-navigation-bar>
		</c-layout>
		<!--任务详情-->
		<view class="taskBox"
			:style="{bottom:((followUrlData.status&&followUrlData.status!=0)||publicJS.timeZoneSwitching(publicJS.timeZoneSwitching(broadInfo.taskEndTime,'YYYY/MM/DD')+' '+'23:59:59','x') < Date.now())?'10px':'173px',overflow:'auto',marginTop:'20rpx'}">
			<view class="task">
				<view class="container-box">
					<view class="top" v-if="followUrlData.type == 'applyKb'">
						<view class="box">
							<text>{{ $t('login.account') }}:</text>
							<text>{{ broadInfo.nickName }}</text>
						</view>
					</view>
					<!--开播申请-->
					<view v-if="followUrlData.type == 'applyKb'">
						<view class="line">
							<text>{{ $t('storeManagement.TaskName') }}：</text>
							<text>{{ kbTaskName }}</text>
						</view>
						<view class="line">
							<text>{{ $t('storeManagement.time1') }}：</text>
							<text v-if="broadInfo.livesStatus == 0 || broadInfo.livesStatus == 2">
								{{publicJS.timeZoneSwitching(broadInfo.startLivesTime,"DD/MM/YYYY")}}
							</text>
							<view class="" v-else>
								<uni-datetime-picker type="date" :start="selectStartTime" :end="broadInfo.taskEndTime"
									v-model="broadInfo.startLivesTime" class="datetime" :disabled="disabledChoose" />
							</view>
						</view>
						

							<view class="line">
								<text>{{ $t('liveBar.LiveName') }}：</text>
								<text v-if="broadInfo.livesStatus == 0 || broadInfo.livesStatus == 2" style=" overflow:hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">
									{{broadInfo.livesSessionName}}
								</text>
								<view class="" v-else>
									<u-input border v-model="broadInfo.livesSessionName" :maxlength="48" :disabled="disabledChoose"></u-input>
								</view>
							</view>
					
				
						<view class="line">
							<text>{{ $t('storeManagement.StoreName') }}：</text>
							<text>{{ broadInfo.shopName }}</text>
						</view>
						<view class="line">
							<text>{{ $t('storeManagement.TaskGoods') }}:</text>
						</view>

					</view>
					<!--                    任务详情、任务结算-->
					<view v-else>
						<view class="line">
							<text>{{ $t('storeManagement.TaskName') }}：</text>
							<text>{{ taskInfo.taskName }}</text>
						</view>
						<view class="line">
							<text>{{ $t('storeManagement.TaskObject') }}：</text>
							<text>{{ taskInfo.taskInfo }}</text>
						</view>
						<view class="line" v-if="followUrlData.type == 'shopxq' ? followUrlData.status == '1' : false">
							<!--                        未通过-->
							<text>{{ $t('storeManagement.taskDuration') }}：</text>
							<text>{{ $t('storeManagement.PlatformSetting') }}</text>
						</view>
						<view class="line line-center" v-if="followUrlData.type == 'shopxq' ? followUrlData.status == '5' : false">
							<!--                        已完成-->
							<text>{{ $t('user.anchor') }}：</text>
							<view>

								<uni-data-select class="dateSelect" v-model="anchor" :localdata="anchorList" placeholder=""
									style="z-index: 99;"></uni-data-select>
							</view> >

						</view>
						<view class="line1">
							<text class="title"
								v-if="followUrlData.type == 'shopxq' ? followUrlData.status == '5' : false">结束时间：</text>
							<text class="title" v-else>{{ $t('storeManagement.MissionPeriod') }}：</text>
							<view style="display: flex;" v-if="taskInfo.taskStartTime">
								{{publicJS.timeZoneSwitching(taskInfo.taskStartTime,"DD/MM/YYYY")}}
								<view class="" style="display: inline-block;margin: 0 10px;">
									to
								</view>
								{{publicJS.timeZoneSwitching(taskInfo.taskEndTime,"DD/MM/YYYY")}}
							</view>
						</view>
					</view>
				</view>
			</view>

			<view class="cut-off-rule" style="margin: 40rpx 0;"></view>
			<!--带货商品/商品信息-->

			<view class="product">

				<view class="container-box">
					<view class="line" v-for="product in productList" :key="product.id" @click="goProductDetail(product)">
						<u-image :src="$u.file.getMedieUrl(product.image)" width="160rpx" height="154rpx"></u-image>
						<view class="left">
							<view class="text">{{ product.goodsName }}</view>
							<view class="text">{{ product.goodsDesc }}</view>
							<view class="flex">
								<view class="font">
									<text>${{ product.originalPrice }}</text>
								</view>
								<view class="font">
									<text>{{`${$t('product.quantityBoard')}${product.quantitySold}`  }}</text>
								</view>
								<!--                                <text>总量： {{ product.amount }} {{ product.allmoney }}元</text>-->
							</view>
						</view>
					</view>

				</view>
			</view>

			<!-- <view class="cut-off-rule"></view> -->

			<!--            带货情况-->
			<view class="container-box detail" v-if="followUrlData.type == 'shopxq' ? followUrlData.status == '5' : false">
				<p>带货情况</p>
				<view>
					<text>带货时长：</text>
					60分钟
				</view>
				<view>
					<text>观看人数：</text>
					12人
				</view>
				<view>
					<text>带货数量：</text>
					90件
				</view>
				<view>
					<text>订单数量：</text>
					5单
				</view>
				<view>
					<text>带货金额：</text>
					$50325555
				</view>
				<view>
					<text>店铺吸粉：</text>
					100粉丝
				</view>
			</view>
			<!--            收益情况'-->
			<view class="container-box detail earnings"
				v-if="followUrlData.type == 'shopxq' ? followUrlData.status == '5' : false">
				<p>收益情况</p>
				<view>
					<text>销售总额：</text>
					$50325555
				</view>
				<view class="flex">
					<text>
						主播佣金：
						<text class="gray">$50325555</text>
					</text>

					<text>佣金构成 = 底薪$20 + 提成$100</text>
				</view>
			</view>

		</view>

		<view class="footer" v-if="!disabledChoose">
			<view class="income-method" v-if="followUrlData.type == 'anchorLook'">
				<text>{{ $t('storeManagement.AnchorIncome') }}</text>
				<text>{{ $t('storeManagement.salary') }}</text>
				<text></text>
			</view>
			<u-button :loading="isloading" class="btnBox" v-if="followUrlData.type == 'anchorLook'" :disabled="disabled"
				@click="orderReceiving">{{ $t('storeManagement.takeOrders') }}</u-button>
			<u-button class="btnBox" v-if="followUrlData.type == 'shopxq' ? followUrlData.status == 0 : false"
				@click="$u.route('/pages/storyType/storeManagement/publishTask', { taskId: followUrlData.taskId })">
				{{ $t('modify.amend') }}
			</u-button>
			<u-button class="btnBox"
				v-if="followUrlData.type == 'shopxq' ? followUrlData.status == $t('orderDetails.Completed') : false">
				{{ $t('product.balanced') }}
			</u-button>
			<u-button class="btnBox" :disabled="footerDisable" v-if="this.followUrlData.type == 'applyKb'"
				@click="goLivePusher" :style="{
						background:
							broadInfo.livesStatus == 0 || (broadInfo.livesStatus == 1 ? broadInfo.taskEndTime < publicJS.timestampToDay(new Date()) : '') ? '#F2F3F5' : '',
						color: broadInfo.livesStatus == 0 || (broadInfo.livesStatus == 1 ? broadInfo.taskEndTime < publicJS.timestampToDay(new Date()) : '') ? 'black' : ''
					}">
				<text v-if="broadInfo.livesStatus == -1">{{ $t('storeManagement.broadcasting') }}</text>
				<text v-if="broadInfo.livesStatus == 0">{{ $t('orderDetails.UnderReview') }}...</text>
				<text
					v-if="broadInfo.livesStatus == 2 && broadInfo.taskStatus != 2 && broadInfo.taskStatus != 3 && broadInfo.taskStatus != 4">
					{{ $t('storeManagement.GoLive') }}
				</text>
				<text v-if="broadInfo.taskStatus == 2">{{ $t('product.unbalanced') }}</text>
				<text v-if="broadInfo.taskStatus == 3">{{ $t('product.settlement') }}</text>
				<text v-if="broadInfo.taskStatus == 4">{{ $t('product.balanced') }}</text>
				<view v-if="broadInfo.livesStatus == 1">
					<text
						v-if="broadInfo.taskEndTime >= publicJS.timestampToDay(new Date())">{{ $t('storeManagement.reapply') }}</text>
					<text v-else>{{ $t('storeManagement.expired') }}</text>
				</view>
			</u-button>
			<view v-if="broadInfo.livesStatus && broadInfo.livesStatus !== 2">
				<view class="hint">{{ $t('storeManagement.reviewTips1') }}</view>
				<view class="hint">{{ $t('storeManagement.reviewTips2') }}</view>
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				isloading: false,
				zIndex: 1,
				productList: [],
				anchor: '',
				anchorList: [
					{ value: 0, text: '全部' },
					{ value: 1, text: '张三' },
					{ value: 2, text: '李四' }
				],
				followUrlData: {},
				title: '',
				kbTaskName: '',
				taskInfo: {},
				//开播详情
				broadInfo: {},
				disabled: false,
				disabledChoose: false,
				selectStartTime: '',
			};
		},
		onLoad(val) {
			this.getConfigKey()
			// 状态（0：审核中 1：未通过审核 2：进行中 5:已完成 ）
			this.followUrlData = val;
			if (this.followUrlData) {
				if (this.followUrlData.status == '2' || this.followUrlData.status == '1') {
					this.title = this.$t('storeManagement.TaskDetails');
				}
				if (this.followUrlData.type == 'shopxq' && this.followUrlData.status == 1) {
					this.title = this.$t('storeManagement.TaskDetails');
				}
				if (this.followUrlData.type == 'shopxq' && this.followUrlData.status == 0) {
					this.title = this.$t('storeManagement.ModifyTask');
				}
				if (this.followUrlData.type == 'shopxq' && this.followUrlData.status == '5') {
					this.title = this.$t('product.balanced');
				}
				if (this.followUrlData.type == 'anchorLook') {
					this.title = this.$t('storeManagement.takeOrders');
				}
				if (this.followUrlData.type == 'applyKb') {
					this.title = this.$t('storeManagement.broadcasting');
				}
			}
			if (this.followUrlData.type == 'applyKb') {
				this.getBroadInfo();
			} else {
				this.getTaskInfo();
			}
		},
		onShow() {
			//刷新页面 避免直播结束后 返回到该页面展示开始直播的状态
			if (this.followUrlData.type === 'applyKb') {
				this.getBroadInfo();
			
			} else {
				this.getTaskInfo();
			}
		},
		computed: {
			footerDisable() {
				if (this.broadInfo) {
					return (
						this.livesStatus == 0 ||
						this.broadInfo.taskStatus == 3 ||
						this.broadInfo.taskStatus == 4 ||
						(this.broadInfo.livesStatus == 1 ? this.broadInfo.taskEndTime < this.publicJS.timestampToDay(new Date()) :
							false)
					);
				}
				return true;
			}
		},
		methods: {


			goProductDetail(item) {
				uni.navigateTo({
					url: '/pages/productDetails/productDetails?productId=' + item.id
				});
			},
			goLivePusher() {

				if (this.broadInfo.livesStatus == -1) {
					this.applyBroadClick(this.broadInfo.livesStatus);
				} else if (this.broadInfo.livesStatus == 1) {
					if (this.broadInfo.taskEndTime >= this.publicJS.timestampToDay(new Date())) {
						this.applyBroadClick(this.broadInfo.livesStatus);

					}
				} else if (this.broadInfo.livesStatus == 2 && this.broadInfo.taskStatus != 2 && this.broadInfo.taskStatus != 3) {

					let endDay = this.publicJS.timeZoneSwitching(this.broadInfo.startLivesTime, "YYYY/MM/DD") + ' ' + '23:59:59'
					let endNumer = this.publicJS.timeZoneSwitching(endDay, "x")
					let endDay1 = this.publicJS.timeZoneSwitching(new Date(), "YYYY/MM/DD") + ' ' + '23:59:59'
					let endNumer1 = this.publicJS.timeZoneSwitching(endDay1, "x")
					console.log(endNumer, endNumer1)

					//判断开播时间
					if (endNumer == endNumer1) {

						let environment = uni.getSystemInfoSync().uniPlatform;
						if (environment == 'app') {
							uni.navigateTo({
								url: `/pages/liveBar/livePusher/livePusher?taskId=${this.followUrlData.taskId}`,
								animationType: 'slide-in-right',
								animationDuration: 300
							});
						} else {
							uni.showToast({
								title: this.$t('product.goMobile'),
								icon: 'none'
							});
						}
					} else if (endNumer < endNumer1) {
						uni.showToast({
							title: this.$t('product.pastTime'),
							icon: 'none'
						})
					} else {
						//未到开播时间
						uni.showToast({
							title: this.$t('product.notTime'),
							icon: 'none'
						});
					}
				} else if (this.broadInfo.taskStatus == 2) {
					//发起结算

					this.$u.post(`/app/anchor/sell/task/settlementTask/${this.followUrlData.taskId}`).then((res) => {
						uni.showToast({
							title: this.$t('product.submitSuccess'),
							icon: 'none'
						});
						this.getBroadInfo()
					});
				}
			},
			//获取开播详情
			getBroadInfo() {
				console.log('开播详情');
				this.$u.get('/app/anchor/sell/lives/sellLivesDetail/' + this.followUrlData.taskId).then((res) => {

					this.broadInfo = res.data;		
								this.kbTaskName=res.data.taskName
					if(this.broadInfo.taskEndTime+57600000 < Date.now()){
						this.disabledChoose=true
						uni.showToast({
							title: this.$t('product.pastTime'),
							icon: 'none'
						})
					}
					console.log(this.publicJS.timeZoneSwitching(this.broadInfo.taskStartTime, "YYYY/MM/DD hh:mm:ss"),this.publicJS.timeZoneSwitching(this.broadInfo.taskEndTime, "YYYY/MM/DD hh:mm:ss") )
					let endDay1 = this.publicJS.timeZoneSwitching(this.broadInfo.taskStartTime, "YYYY/MM/DD") + ' ' +
						'23:59:59'
					let givenDate = this.publicJS.timeZoneSwitching(endDay1, "x")
					let currentTimeStamp = Date.now();
					if (givenDate > currentTimeStamp) {
						this.selectStartTime = givenDate;
						console.log(111111111,givenDate)
					}else{
						this.selectStartTime = new Date()
						console.log(222222)
					}					

					this.productList = this.broadInfo.goodsChildList;
				});
			},
			//获取任务详情
			getTaskInfo() {
				this.$u.get('/app/shop/sell/task/taskDetail/' + this.followUrlData.taskId).then((res) => {
					console.log('任务详情', res);
					this.taskInfo = res.data;

					this.productList = this.taskInfo.goodsChildList;
				});
			},
			//接单
			orderReceiving() {
				this.isloading = true
				this.$u.get('/app/anchor/sell/task/receiveShopSellTask/' + this.followUrlData.taskId).then((res) => {
					this.$u.toast(this.$t('storeManagement.accSuccess'));
					//防止多次点击
					this.disabled = true;
					let that = this;
					setTimeout(function() {
						this.isloading = false
						that.$u.route('/pages/anchorConsole/anchorConsole');
					}, 1000);
				});
			},
			//点击申请开播
			// 任务开播状态 -1:未申请开播 0：审核中 1：审核未通过 2：待开播 3:开播中 4：已开播完
			applyBroadClick(status) {
				if (!this.broadInfo.startLivesTime) {
					this.$u.toast(this.$t('storeManagement.timeTips'));
					return;
				}
				let obj = {
					anchorSellTaskId: this.followUrlData.taskId,
					startLivesTime: this.broadInfo.startLivesTime,
					livesSessionName: this.broadInfo.livesSessionName
				};
				this.$u.post('/app/anchor/sell/lives/applySellLives', obj).then((res) => {
					this.broadInfo.livesStatus = 0;
					this.$u.toast(res.msg);
					this.broadInfo.startLivesTime = this.broadInfo.startLivesTime;
				});
			},
			//获取配置参数
			getConfigKey() {
				let key = 'ossImg'
				this.$u.post(`/app/h2-sys-config/getConfigKey/${key}`).then((res) => {
					console.log(9999, res);
				});
			},
		},


	};
</script>

<style lang="scss" scoped>
	$line-spacing: 42rpx;

	.task-details-page {
		.task {
			font-size: 28rpx;

			.top {
				margin-bottom: $line-spacing;

				.box {
					width: 560rpx;
					height: 108rpx;
					background: #ffffff;
					box-shadow: 6rpx 10rpx 44rpx 0rpx rgba(0, 0, 0, 0.1);
					border-radius: 32rpx 32rpx 32rpx 32rpx;
					opacity: 1;
					margin: 0 auto;
					display: flex;
					align-items: center;
					padding: 0 24rpx;
					position: relative;

					uni-text {
						font-size: 28rpx;

						&:nth-child(1) {
							font-size: 24rpx;
							color: #91909a;
							width: 110rpx;
						}

						&:nth-child(2) {
							position: absolute;
							left: 50%;
							transform: translateX(-50%);
						}
					}
				}
			}

			.line {
				margin-bottom: 30rpx;
				display: flex;

				uni-text {
					&:nth-child(1n) {
						color: #91909a;
						min-width: 340rpx;
						display: flex;
						align-items: center;
					}

					&:nth-child(2n) {
						width: calc(100% - 140rpx);
						color: #1b1d29;
					}
				}


				.uni-stat__select {
					width: 300rpx;
				}
			}

			.line1 {
				margin-bottom: 30rpx;
				display: flex;

				.title {
					color: #91909a;
					width: 130px;
					display: flex;
					align-items: center;


				}


				.uni-stat__select {
					width: 300rpx;
				}
			}

			.line-center {
				align-items: center;
			}
		}

		.product {
			p {
				text-align: center;
				font-size: 28rpx;
				color: #1b1d29;
			}

			.line {
				display: flex;
				justify-content: space-between;
				margin-bottom: 38rpx;

				.left {
					display: flex;
					flex-direction: column;
					width: calc(100% - 180rpx);
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					margin-left: 10rpx;
					font-size: 24rpx;
					color: #91909a;
					width: calc(100% - 170rpx);

					.text {
						font-size: 28rpx;
						color: #1b1d29;
						text-overflow: ellipsis;
						overflow: hidden;
						white-space: nowrap;
					}

					.flex {
						display: flex;
						justify-content: space-between;

						.font {
							uni-text {
								&:nth-child(2) {
									margin-left: 20rpx;
									text-decoration: line-through;
								}
							}
						}
					}
				}
			}

			.income-method {
				display: flex;
				justify-content: space-between;
				padding-top: 82rpx;
				align-items: center;

				uni-text {
					font-size: 30rpx;
					color: #212121;
					width: 30%;

					&:nth-child(2) {
						font-size: 24rpx;
						color: #616161;
					}
				}
			}
		}

		.detail {
			p {
				font-size: 28rpx;
				text-align: center;
				width: 100%;
				margin-bottom: 30rpx;
			}

			border-radius: 26rpx 26rpx 26rpx 26rpx;
			opacity: 1;
			border: 2rpx solid #e1e8e8;
			font-size: 24rpx;
			display: flex;
			flex-wrap: wrap;
			margin: 16px 16px 62rpx 16px;
			padding: 56rpx 30rpx;

			uni-view {
				width: 50%;
				margin-bottom: 20rpx;

				&:nth-child(2n) {
					uni-text {
						width: 120rpx;
						display: inline-block;
					}

					text-align: left;
				}

				uni-text {
					color: #91909a;
				}
			}
		}

		.earnings {
			uni-view {
				width: 100%;
				margin-bottom: 20rpx;
			}

			.flex {
				display: flex;
				justify-content: space-between;

				.gray {
					color: #91909a;
				}
			}
		}

		.footer {

			width: 100%;
			height: 160px;
			display: flex;
			justify-content: space-around;
			align-items: center;
			flex-direction: column;
			position: fixed;
			bottom: 0;

			.hint {
				text-align: center;
				font-size: 24rpx;
				color: #666666;

			}

			.btnBox {
				background-color: #2934D0;
				height: 140rpx;
				width: 80%;
				color: #ffffff;
				font-size: 36rpx;
			}
		}
	}

	.dateSelect {
		z-index: 99 !important;
	}

	/deep/ .uni-date {
		min-width: 176px;
	}

	/deep/ .c-layout-container {
		height: 80px;
	}

	.taskBox {
		position: absolute;
		top: 95px;
		left: 0;
		right: 0;
	}
</style>